<!-- 用户中心 -->
<template>
    <div>
        <wbc-nav ref="child"></wbc-nav>
        <div class="container">
            <div v-show="isEdit" class="tcommonBox">
                <header>
                    <h1>
                            编辑个人资料
                    </h1>
                </header>
                <section>
                    <ul class="userInfoBox">
                        <li class="avatarlist">
                            <span class="leftTitle">头像</span>
                          <el-upload
                              style="text-align: center; padding-bottom: 30px; border-radius: 50%; "
                              class="avatar-uploader"
                              :action="serverIp+'/files/upload'"
                              :show-file-list="false"
                              :on-success="handleAvatarSuccess"
                              :before-upload="beforeAvatarUpload">
                            <img v-if="userInfoObj.avatarUrl" :src="userInfoObj.avatarUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
                          <div style="display: inline-block ;margin-left: 150px; margin-top: 50px" >
                            <span>点击图片上传头像</span>
                          </div>
                        </li>
                        <li class="username">
                            <span class="leftTitle">昵称</span>
                            <el-input v-model="userInfoObj.nickname" placeholder="昵称"></el-input> <i  class="fa fa-wa fa-asterisk"></i>
                        </li>
                        <li>
                            <span class="leftTitle">电子邮件</span>
                            <span v-show="userInfoObj.email">{{userInfoObj.email}}</span>
                          <el-input v-show="!userInfoObj.email" v-model="userInfoObj.email" placeholder="电子邮件"></el-input> <i  class="fa fa-wa fa-asterisk"></i>
                        </li>
                        <li>
                            <span class="leftTitle">性别</span>
                            <template>
                              <el-radio class="radio" v-model="userInfoObj.sex" label="1">男</el-radio>
                              <el-radio class="radio" v-model="userInfoObj.sex" label="0">女</el-radio>
                            </template>
                        </li>

                        <li >
                          <span class="leftTitle">地址</span>
                          <el-input v-model="userInfoObj.address" placeholder="地址"></el-input> <i  class="fa fa-wa fa-asterisk"></i>
                        </li>


                    </ul>
                    <div class=" saveInfobtn">
                        <a class="tcolors-bg"  href="javascript:void(0);" @click="isEdit=!isEdit">返 回</a>
                        <a class="tcolors-bg" href="javascript:void(0);" @click="save">保 存</a>
                    </div>
                </section>
            </div>
            <div v-show="!isEdit" class="tcommonBox">
                <header>
                    <h1>
                            个人中心
                        <span class="gotoEdit" @click="isEdit=!isEdit"><i class="fa fa-wa fa-edit"></i>编辑</span>
                    </h1>

                </header>
                <section>
                    <ul class="userInfoBox">
                        <li class="avatarlist">
                            <span class="leftTitle">头像</span>
                            <div class="avatar-uploader">
                                <img  :src="userInfoObj.avatarUrl?userInfoObj.avatarUrl:'static/img/tou.jpg'"   :onerror="$store.state.errorImg" class="avatar">
                            </div>
                        </li>

                      <li class="username">
                        <span class="leftTitle">用户名</span>
                        <span>{{userInfoObj.username?userInfoObj.username:"无"}}</span>
                      </li>

                        <li class="nickname">
                            <span class="leftTitle">昵称</span>
                            <span>{{userInfoObj.nickname?userInfoObj.nickname:"无"}}</span>
                        </li>
                      <li >
                        <span class="leftTitle">电话号码</span>
                        <span>{{userInfoObj.phone?userInfoObj.phone:"暂无"}}</span>

                      </li>
                        <li>
                            <span class="leftTitle">电子邮件</span>
                            <span>{{userInfoObj.email?userInfoObj.email:"暂无"}}</span>
                        </li>
                        <li>
                            <span class="leftTitle">性别</span>
                            <span>{{userInfoObj.sex==1?'男':'女'}}</span>
                        </li>
                        <li>
                          <span class="leftTitle">地址</span>
                          <span>{{userInfoObj.address?userInfoObj.address:'暂无'}}</span>
                        </li>


                    </ul>

                </section>
            </div>
        </div>
    </div>
</template>

<script>
import header from '../views/header'
import {getUserInfo,savaUserInfo} from '../api/user.js'
import {serverIp} from "../../../../public/config";
//获取用户信息，保存用户信息
    export default {
        name: 'UserInfo',
        data() { //选项 / 数据
            return {
                serverIp: serverIp,
                uploadURL:'',
                isEdit: false,
                userInfo:{},//本地存储的用户信
                userInfoObj:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
            }
        },
        methods: { //事件处理器
            beforeAvatarUpload(file) {//判断头像大小
                const isJPG = file.type == 'image/png'||file.type=='image/jpg'||file.type=='image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                // console.log(file);
                if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!');
                }
                if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

          getUser(userInfoObj){  //存储新的user到浏览器
            //更新浏览器存储器
            localStorage.removeItem("user");
            localStorage.setItem("user",JSON.stringify(userInfoObj))
          },
          //保存方法
          save(){
            if(!this.userInfoObj.nickname){ //昵称为必填
              this.$message.error('昵称为必填项，请填写昵称');
              return;
            }
            this.request.post("/user", this.userInfoObj).then(res=>{
              if(res.code ==="200"){
                this.getUser(this.userInfoObj);  //存储新的数据到浏览器
                this.openFullScreen2();
              }else {
                this.$message.error(res.msg)
              }
            })
          },
          //头像加载框
          openFullScreen2() {
            const loading = this.$loading({
              lock: true,
              text: '加载中请稍等',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.3)'
            });
            setTimeout(() => {
              // 触发父级更新user的方法
              this.$refs.child.getUser();
              this.isEdit = false;
              this.$message.success("修改成功")
              loading.close();
            }, 1000);
          },
          //图片上传方法
          handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.userInfoObj.avatarUrl = res.data;
          },
        },
        components: { //定义组件
            'wbc-nav':header,
        },
        watch: {
           // 如果路由有变化，会再次执行该方法
           '$route':'routeChange'
         },
        created() { //生命周期函数
        }
    }
</script>

<style lang="less" scoped>
.userInfoBox .avatarlist{
    position: relative;
}

.avatar-uploader {
    display: inline-block;
    vertical-align: top;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px;
    height: 120px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    position: absolute;
    top:0;
    left:0;
  }
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
  }
.gotoEdit{
    font-size: 15px;
    float:right;
    cursor: pointer;
    color:#999;
}
.gotoEdit:hover {
    color:#333;
}
/*个人设置*/
.userInfoBox .leftTitle{
    display: inline-block;
    width:100px;
    padding: 10px 0;
}
.userInfoBox .rightInner{
    display: inline-block;
    max-width: calc(100% - 140px);
    vertical-align: top;
}
.userInfoBox li{
    padding:20px;
    border-bottom: 1px solid #ddd;
}
.userInfoBox li:last-child{
    border-bottom: 1px solid transparent;
}
.userInfoBox  .el-input,.userInfoBox  .el-textarea{
    max-width:300px;
    min-width: 100px;
}

.userInfoBox .el-input__inner{
    border-radius: 4px;
}
.userInfoBox  .el-textarea{
    vertical-align: top;
}
.saveInfobtn{
    margin: 20px 0;
    text-align: center;
}
.saveInfobtn a{
    color:#fff;
    padding:6px 20px;
    margin:5px 10px;
    border-radius: 5px;
    font-size: 14px;
}
.userInfoBox .fa-asterisk{
    color: #DF2050;
}
</style>
